<template>
    <div class="signature-pad_wrap">
        <h2>签名画板</h2>
        <aside>
            <section class="attribute-item">
                <h4>画笔颜色:</h4>
                <input type="color" v-model="drawColor" @input="onChangeColor" />
                <span>{{ drawColor }}</span>
            </section>
            <section class="attribute-item">
                <h4>画笔大小:</h4>
                <input type="range" v-model="drawSize" min="0.5" max="4" step="0.1" @input="onChangeSize" />
                <span>{{ drawSize }}</span>
            </section>
        </aside>
        <canvas width="664" height="292" id="canvas" class="canvas"></canvas>
        <aside class="btns">
            <button @click="handleEvent(0)">清空画布</button>
            <button @click="handleEvent(1)">导出SVG</button>
            <button @click="handleEvent(2)">导出PNG</button>
            <button @click="handleEvent(3)">导出JPG</button>
            <button @click="undo">撤回</button>
            <button @click="redo">重做</button>
        </aside>
    </div>
</template>

<script setup>
import SignaturePad from "signature_pad";
import { useDownLoad } from "./download";

const drawColor = ref("#01204E");
const drawSize = ref(0.5);
let signaturePad, canvas;
let undoData = [];

const { download } = useDownLoad();

function handleEvent(type) {
    if (signaturePad.isEmpty()) return;
    switch (type) {
        case 0:
            // clear
            signaturePad.clear();
            undoData = [];
            break;
        case 1:
            // save image as SVG data url
            const dataURLsvg = signaturePad.toDataURL("image/svg+xml");
            download(dataURLsvg, "signature.svg");
            break;
        case 2:
            // save image as PNG
            const dataURLpng = signaturePad.toDataURL();
            download(dataURLpng, "signature.png");
            break;
        case 3:
            // save image as JPEG with 0.5 image quality
            const dataURL = signaturePad.toDataURL("image/jpeg", 0.5);
            download(dataURL, "signature.jpg");
            break;
        default:
            break;
    }
}

function onChangeColor(evt) {
    signaturePad.penColor = drawColor.value;
}

function onChangeSize(evt) {
    signaturePad.minWidth = drawSize.value;
    // const min = Math.round(Math.random() * 10) / parseInt(drawSize.value);
    // const max = Math.round(Math.random() * 10) / parseInt(drawSize.value);
    signaturePad.minWidth = parseInt(drawSize.value);
    signaturePad.maxWidth = parseInt(drawSize.value)*5;
}

function undo() {
    const data = signaturePad.toData();
    if (data && data.length > 0) {
        const removed = data.pop();
        undoData.push(removed);
        signaturePad.fromData(data);
    }
}

function redo() {
    if (undoData.length > 0) {
        const data = signaturePad.toData();
        data.push(undoData.pop());
        signaturePad.fromData(data);
    }
}

function resizeCanvas() {
  // When zoomed out to less than 100%, for some very strange reason,
  // some browsers report devicePixelRatio as less than 1
  // and only part of the canvas is cleared then.
  const ratio = Math.max(window.devicePixelRatio || 1, 1);

  // This part causes the canvas to be cleared
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);

  // This library does not listen for canvas changes, so after the canvas is automatically
  // cleared by the browser, SignaturePad#isEmpty might still return false, even though the
  // canvas looks empty, because the internal data of this library wasn't cleared. To make sure
  // that the state of this library is consistent with visual state of the canvas, you
  // have to clear it manually.
  //signaturePad.clear();

  // If you want to keep the drawing on resize instead of clearing it you can reset the data.
  signaturePad.fromData(signaturePad.toData());
}

nextTick(() => {
    canvas = document.querySelector("canvas");
    signaturePad = new SignaturePad(canvas, {
        minWidth: drawSize.value,
        maxWidth: drawSize.value*2.5,
        penColor: drawColor.value,
        backgroundColor: "#fff",
    });
    signaturePad.addEventListener("endStroke", () => {
        undoData = [];
    });
    // window.onresize = resizeCanvas;
    resizeCanvas();
});

onBeforeUnmount(() => {
    signaturePad = null;
});
</script>

<style lang="scss">
.signature-pad_wrap {
    margin: auto 20px;
    color: #028391;
    .attribute-item {
        display: flex;
        align-items: center;
        margin: 8px auto;
        h4 {
            margin-right: 12px;
        }
        span {
            padding-left: 12px;
            font-weight: bold;
        }
    }
    .canvas {
        border: 5px solid #F6DCAC;
        border-radius: 8px;
    }
    .btns {
        button {
            margin: 6px 5px;
            color: #F6DCAC;
            border: none;
            padding: 5px;
            border-radius: 4px;
            background: #01204E;
        }
    }
}
</style>
